<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.3.5/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .table-area {

        }
    </style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <!--预留的响应式下拉菜单-->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">后台管理系统 版本0.12.1</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <!--                <li class="active"><a href="#">功能一 <span class="sr-only">(current)</span></a></li>-->
                <li><a href="#">功能一</a></li>
                <li><a href="#">功能二</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">功能三</a></li>
                <li><a href="#">功能四</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container ">
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 表单区域
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail3">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="exampleInputPassword3">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                </div>

                <button type="submit" class="btn btn-success">
                    <!--                    <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>-->
                    <i class="fa fa-save" aria-hidden="true"></i> 保 存
                </button>

                <!--                <input type="submit" value="新 建" class="btn btn-success">-->
            </form>
        </div>
    </div>

    <!--表格-->
    <div style="margin-top: 20px;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 数据列表
            </div>
            <div class="panel-body">
                加点描述
            </div>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>
                        <a href="#" class="btn btn-primary btn-xs">编辑</a>
                        <a href="#" class="btn btn-danger btn-xs">
                            <i class="fa fa-trash-o" aria-hidden="true"></i> 删除</a>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td><a href="#" class="btn btn-primary btn-xs">编辑</a>
                        <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o" aria-hidden="true"></i>
                            删除</a></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td><a href="#" class="btn btn-primary btn-xs">编辑</a>
                        <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o" aria-hidden="true"></i>
                            删除</a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>


<!---->
</body>
</html>